<template>
  <el-dialog
    @close="cancel"
    :title="title"
    :visible.sync="open"
    width="390px"
    class="dialogClass position"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="@/assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      class="formClass"
      size="small"
      label-width="120px"
    >
      <el-form-item label="标注类型" prop="tagType">
        <el-select
          class="input"
          v-model="formData.tag"
          placeholder="请选择人员标注类型"
          clearable
        >
          <el-option
            v-for="dict in dict.type.tag_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          /> </el-select
      ></el-form-item>
    </el-form>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cancel" class="resetButton">取消</el-button>
        <el-button class="searchButton" @click="submitForm">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { MODALTYPE, MODALIMG, CASEDEFAULTSTATE } from "../../../utils/variable";
import { editTag } from "@/api/invovedPerson/invovedPerson";
export default {
  dicts: ["tag_type"],
  inheritAttrs: false,
  components: {},
  props: {
    tagType: {
      type: String,
      require: true,
    },
    id: {
      type: Number,
    },
  },
  data() {
    return {
      caseList: [], //案件列表
      temZjh: "", //暂存身份证号
      isDisabled: false,
      submitId: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      formData: {
        id: 0,
        tagType: "",
      },
      rules: {},
    };
  },
  computed: {},
  watch: {
    tagType: {
      handler(value) {
        if (value == MODALTYPE["修改"]) {
          this.reset();
          this.open = true;
          this.title = "增加标注";
        }
      },
      immediate: true,
    },
    id: {
      handler(value) {
        if (value) {
          console.log(value);
          this.submitId = value;
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 取消按钮
    cancel() {
      this.$emit("update:tagType", "");
      this.$emit("update:modalType", "");
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: 0,
        tagType: "",
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.formData.id);
          editTag(this.submitId, this.formData.tag).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.$emit("update:tagType", "");
            this.$emit("update:id", 0);
            // this.$parent.getList();
            this.$emit("fatherMethod");
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/dialog.scss"; //模态框样式

::v-deep.treeselect {
  font-size: 12px !important;
  font-family: $font-family !important;
  font-weight: $form-label-font-weight !important;
}
.addressSelect {
  width: 140px !important;
  margin-right: 10px !important;
}
.formClass {
  margin-right: 20px;
}
::v-deep.position {
  margin-top: 250px !important;
}
.modalTitle {
  display: flex;
  height: 40px !important;
  font-size: 17px !important;
  font-family: Microsoft YaHei;
  border-bottom: 1px solid #cdcdcd;
  font-weight: 700;
  color: #414141;
  opacity: 0.8;

  .titleLogo {
    width: 20px;
    height: 20px;
    line-height: 25px;
    margin-top: 1px;
    margin-right: 5px;
  }
}
.formClass {
  margin-top: 20px !important;
}
.resetButton {
  width: 60px !important;
  height: 30px !important;
  font-size: 13px !important;
}
.searchButton {
  width: 60px !important;
  height: 30px !important;
  font-size: 13px !important;
}
.dialog-footer {
  height: 17px !important;
}
</style>
